<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { contractDetail } from '@/api/contract'
import ProgressBar from '@/components/ProgressBar.vue'
import { Toast } from 'vant'
const router = useRouter()
const contractId = router.currentRoute.value.params.id
const state = reactive({
  item: {} as any,
  loading: false
})
const leftBack = () => history.back()
const gotoProgress = () => {
  router.push('/contract/progress/' + state.item.contract_id)
}
const getContractDetail = async () => {
  state.loading = true
  const res: any = await contractDetail({
    id: contractId
  })
  if (res) {
    state.item = res.records[0]
  } else {
    Toast(res.msg)
  }
  state.loading = false
}
getContractDetail()
</script>
<template>
  <van-nav-bar title="合约进度" left-arrow @click-left="leftBack" />
  <div v-if="state.item">
    <h3>{{ state.item.contract_name }}</h3>
    <div class="progress-bar">
      <ProgressBar :item="state.item"></ProgressBar>
      <div class="progress-bar-text">
        <span>第一阶段</span>
        <span>第二阶段</span>
        <span>第三阶段</span>
        <span>第四阶段</span>
      </div>
    </div>
    <dl>
      <dt>
        <h4>
          第一阶段开发进度评估<span v-if="state.item.contract_I_state == -1"
            >暂无评估</span
          >
        </h4>
        <p v-if="state.item.contract_I_stage">
          {{ state.item.contract_I_stage }}
        </p>
      </dt>
      <dt>
        <h4>
          第二阶段开发进度评估<span v-if="state.item.contract_II_state == -1"
            >暂无评估</span
          >
        </h4>
        <p v-if="state.item.contract_II_stage">
          {{ state.item.contract_II_stage }}
        </p>
      </dt>
      <dt>
        <h4>
          第三阶段开发进度评估<span v-if="state.item.contract_III_state == -1"
            >暂无评估</span
          >
        </h4>
        <p v-if="state.item.contract_III_stage">
          {{ state.item.contract_III_stage }}
        </p>
      </dt>
      <dt>
        <h4>
          第四阶段开发进度评估<span v-if="state.item.contract_IIII_state == -1"
            >暂无评估</span
          >
        </h4>
        <p v-if="state.item.contract_IIII_stage">
          {{ state.item.contract_IIII_stage }}
        </p>
      </dt>
    </dl>
  </div>
  <van-loading v-if="!state.item">加载中...</van-loading>
</template>
<style scoped>
h3 {
  font-size: 0.8rem;
  line-height: 0.8rem;
  font-weight: 500;
  color: #333333;
  padding: 1.2rem 0.69rem 1rem;
}
.progress-bar {
  margin: 0 0.64rem 1.17rem;
}
.progress-bar-text {
  display: flex;
}
.progress-bar-text span {
  flex: 1;
  text-align: right;
  margin: 0 1px;
  padding-top: 0.45rem;
}
dl {
  margin: 0 0.64rem;
}
dl dt {
  border: 1px solid #ededed;
  border-radius: 0.27rem;
  margin-bottom: 0.59rem;
  padding: 0.75rem 0.69rem;
}
dl dt h4 {
  display: flex;
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 300;
  color: #666666;
}
dl dt h4 span {
  flex: 1;
  text-align: right;
  font-size: 0.64rem;
  font-weight: 500;
  color: #acacac;
}
dl dt p {
  font-size: 0.64rem;
  font-weight: 400;
  color: #333333;
  line-height: 0.8rem;
}
</style>
